import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/app/controllers/home/exercise_records/model/exercise_type.dart';

import 'logic.dart';

class MovementPage extends StatelessWidget {
  MovementPage({Key? key}) : super(key: key);

  final logic = Get.put(MovementLogic());
  final state = Get.find<MovementLogic>().state;

  List sportTypes = [];

  @override
  Widget build(BuildContext context) {
    var arguments = Get.arguments;
    if (arguments != null && arguments.containsKey('name')) {
      sportTypes.add(arguments['name']);
      state.movementTopSports.clear();
      state.movementTopSports.addAll(sportTypes);
    } else {
      sportTypes.addAll(state.movementTopSports);
    }

    if (sportTypes.length > 3) {
      sportTypes = sportTypes.sublist(0, 3);
    }

    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => Get.back()),
        centerTitle: true,
      ),
      body: Column(
        children: [
          SizedBox(height: 60.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: sportTypes
                .map((item) => GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      if (state.index != sportTypes.indexOf(item)) {
                        logic.selectSport(sportTypes.indexOf(item));
                      }
                    },
                    child: GetBuilder<MovementLogic>(
                      id: 'sprot_select',
                      builder: (_) {
                        return Container(
                          alignment: Alignment.center,
                          width: 344.w,
                          height: 131.h,
                          decoration: BoxDecoration(
                              color: state.index == sportTypes.indexOf(item) ? ColorConst.accentColor : Colors.white,
                              borderRadius: BorderRadius.circular(60.r)),
                          // child: Center(
                          child: Text(
                            Type.i18nNameBy(item.type.code),
                            style: TextStyle(
                              color: state.index == sportTypes.indexOf(item) ? Colors.white : ColorConst.secondaryFontColor,
                              fontSize: 38.sp,
                            ),
                          ),
                          // ),
                        );
                      },
                    )))
                .toList(),
          ),
          Container(
              margin: EdgeInsets.fromLTRB(38.w, 79.h, 38.w, 100.h),
              height: 1738.h,
              child: Container(
                padding: EdgeInsets.all(10.w),
                decoration: BoxDecoration(
                  boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.7), blurRadius: 5)],
                  borderRadius: BorderRadius.circular(60.r),
                ),
                child: Stack(
                  fit: StackFit.expand,
                  alignment: Alignment.center,
                  children: [
                    GoogleMap(
                      mapToolbarEnabled: false,
                      zoomControlsEnabled: false,
                      mapType: MapType.normal,
                      initialCameraPosition: const CameraPosition(target: LatLng(39.906217, 116.3912757), zoom: 17.0),
                      myLocationEnabled: true,
                      myLocationButtonEnabled: false,
                      onMapCreated: (GoogleMapController controller) => logic.onMapCreated(controller),
                    ),
                    Positioned(
                        bottom: 20.h,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            GestureDetector(
                              child: Image.asset('assets/images/sports/icon_sport_target.png'),
                              onTap: () => logic.goGoalSettingPage() /*logic.startExercise()*/,
                            ),
                            GestureDetector(
                              child: Image.asset('assets/images/sports/go.png', width: 320.w, height: 320.w),
                              onTap: () => logic.goCountDownPage(),
                            ),
                            // GestureDetector(
                            //   child: Image.asset('assets/images/sports/icon_sport_setting.png', width: 260.w, height: 260.h),
                            //   onTap: () => Get.toNamed(SportsRoutes.goalSettingPage) /*logic.startExercise()*/,
                            // ),
                          ],
                        ))
                  ],
                ),
              )),
        ],
      ),
    );
  }
}
